import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, DatePicker, Modal, message} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import ChargeStandardTable from '../../components/ChargeStandardTable';
import UserCreateModal from '../../components/user/UserCreateModal';
import styles from './UserList.less';


const {RangePicker} = DatePicker;

const FormItem = Form.Item;
const {Option} = Select;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');


@connect(state => ({
    user: state.user,
    charge: state.charge,
}))
@Form.create()
export default class ChargeList extends PureComponent {
    state = {
        addInputValue: '',
        modalVisible: false,
        expandForm: false,
        selectedRows: [],
        formValues: {},
        type: 'email',
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({
            type: 'charge/fetch',
        });
    }

    handleStandardTableChange = (pagination, filtersArg, sorter) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;

        const filters = Object.keys(filtersArg).reduce((obj, key) => {
            const newObj = {...obj};
            newObj[key] = getValue(filtersArg[key]);
            return newObj;
        }, {});

        const params = {
            page: pagination.current,
            size: pagination.pageSize,
            ...formValues,
            ...filters,
        };
        if (sorter.field) {
            console.log(sorter.order);
            // params.sorter = `${sorter.field}_${sorter.order}`;
            params.order = sorter.order;
            params.sorter = sorter.field;
        }

        dispatch({
            type: 'charge/fetch',
            payload: params,
        });
    }

    handleFormReset = () => {
        const {form, dispatch} = this.props;
        form.resetFields();
        dispatch({
            type: 'charge/fetch',
            payload: {},
        });
    }

    toggleForm = () => {
        this.setState({
            expandForm: !this.state.expandForm,
        });
    }

    handleMenuClick = (e) => {
        const {dispatch} = this.props;
        const {selectedRows} = this.state;

        if (!selectedRows) return;

        switch (e.key) {
            case 'remove':
                dispatch({
                    type: 'charge/remove',
                    payload: {
                        ids: selectedRows.map(row => row.id),
                    },
                    callback: () => {
                        this.setState({
                            selectedRows: [],
                        });
                    },
                });
                break;
            default:
                break;
        }
    }

    handleSelectRows = (rows) => {
        this.setState({
            selectedRows: rows,
        });
    }

    handleSearch = (e) => {
        e.preventDefault();

        const {dispatch, form} = this.props;

        form.validateFields((err, fieldsValue) => {
            if (err) return;

            const values = {};
            if (fieldsValue.keyword) {
                values.type = this.state.type;
                values.keyword = fieldsValue.keyword;
            }
            if (fieldsValue.created_at) {
                values.created_at = fieldsValue.created_at.map(item => item.format('YYYY-MM-DD HH:mm:ss'));
            }
            this.setState({
                formValues: values,
            });

            dispatch({
                type: 'charge/fetch',
                payload: values,
            });
        });
    }

    handleModalVisible = (flag) => {
        this.props.dispatch({
            type: 'user/changeVisible',
            payload: true,
            callback: () => {
                console.log('回调');
            },
        });
    }
    handleStatus = (status) => {
        console.log(this.state.selectedRows);
        this.props.dispatch({
            type: 'user/status',
            payload: {
                status,
                items: this.state.selectedRows,
            },
            callback: () => {
                this.setState({
                    selectedRows: [],
                });
            },
        });
    }


    


    render() {
        const {charge: {loading, data}} = this.props;
        const {selectedRows} = this.state;
        const menu = (
          <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
            <Menu.Item key="remove">删除</Menu.Item>
          </Menu>
        );
        return (
          <PageHeaderLayout title="充值记录">
            <Card bordered={false}>
              <div className={styles.tableList}>
                <div className={styles.tableListForm}>
                 
                </div>
               
                <ChargeStandardTable
                  selectedRows={selectedRows}
                  loading={loading}
                  data={data}
                  onSelectRow={this.handleSelectRows}
                  onChange={this.handleStandardTableChange}
                />
              </div>
            </Card>
           
          </PageHeaderLayout>
        );
    }
}
